<template>
  <div class="full-box shadow-box padding-box">
    <div class="operate-bar">
      <div class="btn-group">
        <el-button type="primary" size="default" @click="assignAdd"
          >新增交办单</el-button
        >
        <el-button type="success" size="default" @click="assignAdd"
          >办结</el-button
        >
        <el-button type="info" size="default" @click="goBack">返回</el-button>
      </div>
    </div>
    <el-collapse v-if="info" v-model="activeNames" :accordion="false">
      <el-collapse-item
        v-for="(item, index) in collapseItems"
        :key="item.id"
        :title="item.title"
        :name="index"
      >
        <template #title>{{ item.title }}</template>
        <!-- 项目信息 -->
        <div v-if="item.id == 1">
          <div class="desc">
            <label>项目名称：</label>
            <span>{{ info.project_name }}</span>
          </div>
          <div class="desc">
            <label>开工日期：</label>
            <span>{{ info.fact_start_date }}</span>
          </div>
        </div>
        <!-- 问题信息 -->
        <div v-if="item.id == 2">
          <div class="desc">
            <label>问题来源：</label>
            <span>{{ info.source_type }}</span>
          </div>
          <div class="desc">
            <label>存在问题：</label>
            <span>{{ info.problem_desc }}</span>
          </div>
          <div class="desc">
            <label>工作建议：</label>
            <span>{{ info.proposal }}</span>
          </div>
          <div class="desc">
            <label>协调情况：</label>
            <span>{{ info.concert_content }}</span>
          </div>
          <div class="desc">
            <label>建议承办单位：</label>
            <span>{{ info.proposeDept }}</span>
          </div>
          <div class="desc">
            <label>期望问题解决期限：</label>
            <span>{{ info.finish_limit_date }}</span>
          </div>
          <div class="desc">
            <label>是否已与承办单位协调：</label>
            <span>{{ info.concert_fag }}</span>
          </div>
        </div>
      </el-collapse-item>

      <el-divider direction="horizontal" content-position="left">
        <span style="font-size: 16px"> 批示件办理情况 </span>
      </el-divider>

      <!-- <div class="assign-title">交办单</div> -->
      <template v-if="info.assignList && info.assignList.length > 0">
        <el-tabs v-model="active" type="border-card" tab-position="top">
          <el-tab-pane
            v-for="(item, index) in info.assignList"
            :key="item.id"
            :label="item.undertake_dept_name"
            :name="index + ''"
          >
            <div class="step-wrapper">
              <el-steps
                :active="getStepStatus(parseInt(item.status))"
                finish-status="success"
                align-center
              >
                <el-step
                  v-for="(step, index) in stepOptions"
                  :key="index"
                  :icon="step.icon"
                  :title="step.title"
                ></el-step>
              </el-steps>
            </div>
            <el-collapse v-model="activeNames" :accordion="false">
              <el-collapse-item title="交办信息" name="assign">
                <div class="desc">
                  <label> 问题来源： </label>
                  <span>
                    {{ item.source_type }}
                  </span>
                </div>
                <div class="desc">
                  <label> 问题描述： </label>
                  <span>
                    {{ item.problem_desc }}
                  </span>
                </div>
                <div class="desc">
                  <label> 交办意见： </label>
                  <span>
                    {{ item.assign_opinion }}
                  </span>
                </div>
                <div class="desc">
                  <label> 交办人： </label>
                  <span>
                    {{ item.assigner_name }}
                  </span>
                </div>
                <div class="desc">
                  <label> 交办日期： </label>
                  <span>
                    {{ item.assign_date }}
                  </span>
                </div>
              </el-collapse-item>
              <el-collapse-item
                v-if="item.mendList && item.mendList.length > 0"
                title="反馈单"
                name="feedback"
              >
                <el-tabs
                  v-model="activeFeedBack"
                  type="border-card"
                  tab-position="top"
                >
                  <el-tab-pane
                    v-for="(feedback, index) in item.mendList"
                    :key="'fb_' + index"
                    :label="`第 ${item.mendList.length - index} 次反馈`"
                    :name="index + ''"
                  >
                    <div>
                      <div class="desc">
                        <label> 反馈结果： </label>
                        <span>
                          {{ feedback.mend_feedback }}
                        </span>
                      </div>
                      <div class="desc">
                        <label> 是否已与建设单位协调一致： </label>
                        <span>
                          {{ feedback.mend_unanimous }}
                        </span>
                      </div>
                      <div class="desc">
                        <label> 反馈日期： </label>
                        <span>
                          {{ feedback.mend_time }}
                        </span>
                      </div>
                    </div>
                    <el-divider></el-divider>
                    <div>
                      <div class="desc">
                        <label> 评价结果： </label>
                        <span>
                          {{ feedback.check_status == 0 ? "满意" : "不满意" }}
                        </span>
                      </div>
                      <div class="desc">
                        <label> 评价内容： </label>
                        <span>
                          {{ feedback.check_opinion }}
                        </span>
                      </div>
                      <div class="desc">
                        <label> 评价时间： </label>
                        <span>
                          {{ feedback.check_time }}
                        </span>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-else>
        <el-empty description="暂无交办单"></el-empty>
      </template>
    </el-collapse>
    <QuestionAssignForm
      :visible.sync="dialog.assign"
      :current="info"
      @update="initData"
    ></QuestionAssignForm>
  </div>
</template>

<script>
import { getQuestionDetails } from "@/api/MajorProjectPromotion/Index";
import QuestionAssignForm from "./components/QuestionAssignForm.vue";
export default {
  name: "ProjectQuestionDetails",
  components: { QuestionAssignForm },
  data() {
    return {
      id: 0,
      active: "",
      activeFeedBack: "",
      activeNames: [1],
      collapseItems: [
        { id: 1, title: "项目信息" },
        { id: 2, title: "问题信息" },
      ],
      info: null,
      stepOptions: [
        { icon: "", title: "问题梳理" },
        { icon: "", title: "问题交办" },
        { icon: "", title: "交办反馈" },
        { icon: "", title: "反馈评价" },
      ],
      dialog: {
        assign: false,
      },
    };
  },
  methods: {
    initData() {
      getQuestionDetails({ id: this.id }).then((res) => {
        if (res.code == 0) {
          this.info = res.data;
        }
      });
    },
    assignAdd() {
      this.dialog.assign = true;
    },
    /** 批示件 交办状态
     * 0未反馈
     * 1已反馈
     * 2已退回
     * 3已办结
     */
    getStepStatus(status) {
      switch (status) {
        case 0:
          return 2;
        case 1:
          return 3;
        case 2:
          return 2;
        case 3:
          return 4;
      }
    },
    goBack() {
      this.$router.push("/majorProjectPromotionQuestionAssign");
    },
  },
  created() {
    this.id = this.$route.params.id;
    if (this.id > 0) {
      this.initData();
    }
  },
};
</script>

<style lang="scss" scoped>
</style>